<template>
  <div class="profile">
    <div class="top" v-if="user">
      <div class="img" >
        <img src="http://liufusong.top:8080/img/avatar.png" alt="">
      </div>
      <div class="login-box">
        <div class="img-user">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
        </div>
        <div class="user-detail">
          <p>好客_119625</p>
          <van-button round  type="primary" size="mini" @click="togout">退出</van-button>
          <div class="edit">
            <span>编辑个人资料</span>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
    <div class="top" v-else >
      <!-- 未登录的显示的图片 -->
      <div class="img" style="height:300px">
        <img src="http://liufusong.top:8080/img/profile/bg.png" alt="">
      </div>
      <div class="login-box" style="height:165px">
        <div class="img-user">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
        </div>
        <div class="user-detail">
          <p style="margin-bottom:25px">游客</p>
          <van-button class="loginchangebtn"  type="primary" size="mini" @click="tologin">去登陆</van-button>
        </div>
      </div>
    </div>
    <!-- 登录的中间模块 -->
    <div class="middle" v-if="user">
      <van-grid :column-num="3" :clickable="true">
        <van-grid-item to="/favoriate" text="我的收藏" >
          <template #icon>
            <van-icon name="star-o" />
          </template>
        </van-grid-item>
        <van-grid-item to="/rent" text="我的出租" >
          <template #icon>
           <van-icon name="wap-home-o" />
          </template>
        </van-grid-item>
        <van-grid-item  text="看房记录" >
          <template #icon>
            <van-icon name="clock-o" />
          </template>
        </van-grid-item>
        <van-grid-item  text="成为房主" >
          <template #icon>
            <van-icon name="vip-card-o" />
          </template>
        </van-grid-item>
        <van-grid-item  text="个人资料" >
          <template #icon>
            <van-icon name="contact" />
          </template>
        </van-grid-item>
        <van-grid-item  text="联系我们" >
          <template #icon>
            <van-icon name="phone-circle-o" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 未登录的中间 -->
    <div class="middle" v-else>
      <van-grid :column-num="3" :clickable="true">
        <van-grid-item to="/login" text="我的收藏" >
          <template #icon>
            <van-icon name="star-o" />
          </template>
        </van-grid-item>
        <van-grid-item to="/login" text="我的出租" >
          <template #icon>
           <van-icon name="wap-home-o" />
          </template>
        </van-grid-item>
        <van-grid-item  text="看房记录" >
          <template #icon>
            <van-icon name="clock-o" />
          </template>
        </van-grid-item>
        <van-grid-item  text="成为房主" >
          <template #icon>
            <van-icon name="vip-card-o" />
          </template>
        </van-grid-item>
        <van-grid-item  text="个人资料" >
          <template #icon>
            <van-icon name="contact" />
          </template>
        </van-grid-item>
        <van-grid-item  text="联系我们" >
          <template #icon>
            <van-icon name="phone-circle-o" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="footimg" style="text-align:center">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" width="92%">
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Dialog } from 'vant'
export default {
  name: 'profile',
  data () {
    return {
      flag: false
    }
  },
  computed: {
    ...mapState(['user'])
  },

  created () {

  },

  methods: {
    tologin () {
      this.$router.push('/login')
    },
    togout () {
      Dialog.confirm({
        title: '提示',
        message: '是否确定退出'
      })
        .then(() => {
          this.$store.commit('removeuser')
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang='less'>
.profile{
  .top{
    width: 100%;
    position: relative;
    .loginchangebtn{
      width: 70px !important;
      height: 30px !important;
      font-size: 13px;
    }
  }
  .login-box{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 320px;
    height: 208px;
    background-color: #fff;
    box-shadow: 0 0 10px 3px #ddd;
    .user-detail{
      margin-top: 45px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .van-button{
        width: 54px;
        height: 20px;
      }
      p {
        margin: 0;
        padding: 0;
        margin-bottom: 8px;
        font-size: 13px;
      }
      .edit{
        margin-top: 20px;
        font-size: 12px;
        color: #ccc;
      }
    }
    .img-user{
      width: 60px;
      height: 60px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%,-50%);
      border: 5px solid #f5f5f5;
      border-radius: 50%;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .img{
    width: 100%;
    height: 375px;
    background-color: #fff;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .van-grid {
    height: 190px;
    /deep/.van-grid-item__text{
      font-size: 13px;
    }
    .van-icon{
      font-size: 20px;
      margin-bottom: 8px;
    }
  }
}
</style>
